<template>
  <div class="app">
    <!-- 头部 -->
    <div
      class="head"
      v-if="$route.meta.topShow"
    >
      <img
        src="../public/logo.png"
        alt=""
      >
      <span class="headIcon">
        <van-icon name="contact" @click="toMy" />
      </span>
    </div>

    <!-- main -->
    <router-view class="main"></router-view>
    <!-- 底部 -->
    <van-tabbar
      v-model="active"
      class="foot"
      v-if="$route.meta.bottomShow"
    >
      <van-tabbar-item to="/recommend">
        <span>推荐</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="gem-o" to="/musichall">音乐馆</van-tabbar-item>
      <van-tabbar-item icon="tv-o" to="/radio">电台</van-tabbar-item>
      <van-tabbar-item icon="play-circle-o" to="/podcast">排行榜</van-tabbar-item>
      <van-tabbar-item icon="smile-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    icon: {
      active: 'https://img01.yzcdn.cn/vant/user-active.png',
      inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png'
    },
    value: '',
    // isShow: true

  }),
  methods: {
    toMy() {
      this.$router.push({ path: '/my' })
    }
  },
  watch: {
    $route(to, from) {
      if (to.path === '/recommend') {
        this.active = 0
      }
      if (to.path === '/musichall') {
        this.active = 1
      }
      if (to.path === '/radio') {
        this.active = 2
      }
      if (to.path === '/podcast') {
        this.active = 3
      }
      if (to.path === '/my') {
        this.active = 4
      }
      // if (this.$route.name == 'my') {
      //   this.isShow = true
      // }
      // if (this.$route.name == 'radio') {
      //   this.isShow = true
      // }
      // if (this.$route.name == 'recommend') {
      //   this.isShow = true
      // }
      // if (this.$route.name == 'podcast') {
      //   this.isShow = true
      // }
      // if (this.$route.name == 'musichall') {
      //   this.isShow = true
      // }
      // if (this.$route.name == '/') {
      //   this.isShow = true
      // }

      // console.log(this.$route.name)
    }
  }
}
</script>
<style lang="scss" scoped>
.app {
  .head {
    width: 100%;
    height: 44px;
    background-color: #31c27c;
    padding: 0 10px;
    display: flex;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    img {
      width: 90px;
      height: 25px;
      margin: 10px 280px 0 0;
    }
  }
  .foot {
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
